<template>
  <div style="padding: 24px;">
    <div
      style="font-size: 16px;font-weight: 500;color: #1D2129;margin-bottom: 16px;"
    >
      体育师资-分布情况
    </div>
    <div
      style="height: 40px;width: 100%;background: #F9F9F9;line-height: 40px;margin-top: 16px;"
    >
      <div style="font-size: 12px;margin-left: 20px;">
        <el-tag
          :type="onOrOut === '在编' ? 'success' : 'info'"
          @click="
            onOrOut = '在编';
            datalist();
          "
          >在编体育教师数量</el-tag
        >
        <el-tag
          :type="onOrOut === '外聘' ? 'success' : 'info'"
          @click="
            onOrOut = '外聘';
            datalist();
          "
          >外聘指导教师/教练（人数）</el-tag
        >
      </div>
    </div>
    <div>
      <div style="width:100px;font-size: 14px;color: #000000;margin-top: 20px;">
        学历分布
      </div>
      <div style="display: flex;justify-content: space-between;">
        <div id="benChart" style="width:40%;height:160px"></div>
        <div
          style="width:60%;height:160px;padding: 31px 16px; display: flex; flex-wrap: wrap;justify-content: space-between;"
        >
          <div style="display: flex;" v-for="(item, index) in benList">
            <div
              :style="{ backgroundColor: item.color }"
              class="dianidan"
            ></div>
            <div>
              <div style="font-size: 12px;margin-right: 7px; width: 116px;">
                {{ item.name }}
              </div>
              <div style="font-size: 22px;color: #0F0F0F;">
                {{ item.value }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="width:100px;font-size: 14px;color: #000000;margin-top: 20px;">
        级别分布
      </div>
      <div style="display: flex;justify-content: space-between;">
        <div id="levelChart" style="width:40%;height:160px;"></div>
        <div
          style="width:60%;height:160px;padding: 31px 16px; display: flex; flex-wrap: wrap;justify-content: space-between;"
        >
          <div style="display: flex;" v-for="(item, index) in levelList">
            <div
              :style="{ backgroundColor: item.color }"
              class="dianidan"
            ></div>
            <div>
              <div style="font-size: 12px;margin-right: 7px; width: 116px;">
                {{ item.name }}
              </div>
              <div style="font-size: 22px;color: #0F0F0F;">
                {{ item.value }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getTeachData } from "@/api/statistics";

export default {
  name: "SchoolType",
  data() {
    return {
      onOrOut: "在编",
      benList: [],
      levelList: [],
      totalBen: 0,
      totalLevel: 0,
      dict: {
        color: ["#4E88F5", "#EEB74A", "#41B776", "#EC4747"]
      }
    };
  },
  mounted() {
    this.datalist();
  },

  methods: {
    async datalist() {
      const res = await getTeachData({
        year: new Date().getFullYear(),
        onOrOut: this.onOrOut
      });
      if (res && res.data) {
        this.benList = res.data.benList.map((item, index) => {
          item.color = this.dict.color[index];
          return item;
        });
        this.levelList = res.data.levelList.map((item, index) => {
          item.color = this.dict.color[index];
          return item;
        });
        this.totalBen = res.data.totalBen;
        this.totalLevel = res.data.totalLevel;
      }
      // 基于准备好的dom，初始化echarts实例
      var benChart = echarts.init(document.getElementById("benChart"));
      var levelChart = echarts.init(document.getElementById("levelChart"));
      // 指定图表的配置项和数据
      var option1;
      option1 = {
        title: {
          text: this.totalBen,
          left: "center",
          top: "42%",
          textStyle: {
            color: "#333",
            fontSize: 15,
            align: "center"
          }
        },
        tooltip: {
          trigger: "item"
        },

        legend: {
          top: "5%",
          left: "center",
          show: false
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            radius: ["65%", "80%"],

            labelLine: {
              show: false
            },
            data: this.benList
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      benChart.setOption(option1);
      var option2;
      option2 = {
        title: {
          text: this.totalLevel,
          left: "center",
          top: "42%",
          textStyle: {
            color: "#333",
            fontSize: 15,
            align: "center"
          }
        },
        tooltip: {
          trigger: "item"
        },

        legend: {
          top: "5%",
          left: "center",
          show: false
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            radius: ["65%", "80%"],

            labelLine: {
              show: false
            },
            data: this.levelList
          }
        ]
      };
      levelChart.setOption(option2);
      // 监听父元素大小变化 刷新图表
      var ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;
          benChart.resize();
          levelChart.resize();
        }
      });
      ro.observe(Chart);
    }
  }
};
</script>

<style scoped>
.dianidan {
  width: 7px;
  height: 7px;
  margin-right: 5px;
  margin-top: 3px;
}
</style>
